<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- coffee.qdoc -->
  <title>Coffee Machine Example | Qt 5.14</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt 5.14</a></td><td >Coffee Machine Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.14.2 Reference Documentation</td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Coffee Machine Example</h1>
<span class="subtitle"></span>
<!-- $$$demos/coffee-description -->
<div class="descr"> <a name="details"></a>
<div class="border"><p class="centerAlign"><img src="images/coffee_machine_overview.png" alt="" /></p></div><p>The coffee machine application lets you choose a type of coffee on the left side of the main screen. After selection, the app displays what the coffee blend will contain (ratio coffee/hot milk/milk foam). This can be modified with two sliders. When the brew has been started, the app shows an animated display of the brewing process, then returns to the start screen.</p>
<p>First the start screen <code>Animationflowform</code> is displayed, showing a sidebar with several types of coffee, and an empty cup on the right screen.</p>
<p>Selecting a coffee type - for example, cappuccino - triggers <code>animation1</code> and <code>animation2</code> in CoffeeButton.qml. On the right side, you will see the coffee blend you selected.</p>
<pre class="qml">

      <span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
          <span class="name">anchors</span>.fill: <span class="name">parent</span>
          <span class="name">onClicked</span>: <span class="name">root</span>.<span class="name">clicked</span>()
          <span class="name">onPressed</span>: {
              <span class="name">glow</span>.<span class="name">visible</span> <span class="operator">=</span> <span class="number">true</span>
              <span class="name">animation1</span>.<span class="name">start</span>()
              <span class="name">animation2</span>.<span class="name">start</span>()
          }
      }

</pre>
<p>It also triggers cappuccinoButton.onClicked(), which sets the default mix for the coffee type selected:</p>
<pre class="qml">

      <span class="name">cappuccinoButton</span>.onClicked: {
          <span class="name">sideBar</span>.<span class="name">currentCoffee</span> <span class="operator">=</span> <span class="name">qsTr</span>(<span class="string">&quot;Cappucino&quot;</span>)
          <span class="name">sideBar</span>.<span class="name">currentMilk</span> <span class="operator">=</span> <span class="number">7</span>
          <span class="name">sideBar</span>.<span class="name">currentCoffeeAmount</span> <span class="operator">=</span> <span class="number">3.5</span>
          <span class="name">sideBar</span>.<span class="name">coffeeSelected</span>()
      }

</pre>
<div class="border"><p class="centerAlign"><img src="images/coffee_machine_selection.png" alt="" /></p></div><p class="figCaption">Coffee blend cappuccino</p>
<p><code>sideBar.coffeeSelected()</code> <code>sets</code> applicationFlow.state to &quot;selection&quot;</p>
<p>If you click &quot;Brew me a cup&quot;, choosingCoffee.brewButtonSelection.onClicked is triggered:</p>
<pre class="qml">

      <span class="name">choosingCoffee</span>.brewButtonSelection.onClicked: {
          <span class="name">applicationFlow</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">&quot;settings&quot;</span>
          <span class="name">applicationFlow</span>.<span class="name">choosingCoffee</span>.<span class="name">milkSlider</span>.<span class="name">value</span> <span class="operator">=</span> <span class="name">applicationFlow</span>.<span class="name">choosingCoffee</span>.<span class="name">sideBar</span>.<span class="name">currentMilk</span>
          <span class="name">applicationFlow</span>.<span class="name">choosingCoffee</span>.<span class="name">sugarSlider</span>.<span class="name">value</span> <span class="operator">=</span> <span class="number">2</span>
      }

</pre>
<p>On the right side of the screen, you will see two sliders, one for the amount of milk, and one for sugar. They will have default values, but can be modified by the user.</p>
<div class="border"><p class="centerAlign"><img src="images/coffee_machine_modify.png" alt="" /></p></div><p>If you click on <code>Brew</code>, <code>choosingCoffee.brewButton.onClicked()</code> is triggered, which displays a screen with the message &quot;Please insert cup into tray&quot;.</p>
<pre class="qml">

      <span class="name">choosingCoffee</span>.brewButton.onClicked: {
          <span class="name">applicationFlow</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">&quot;empty cup&quot;</span>
      }

</pre>
<div class="border"><p class="centerAlign"><img src="images/coffee_machine_emptycup.png" alt="" /></p></div><p>Clicking on <code>Continue</code> starts the brewing of the coffee type you selected.</p>
<pre class="qml">

      <span class="name">emptyCup</span>.continueButton.onClicked: {
          <span class="name">applicationFlow</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">&quot;brewing&quot;</span>
          <span class="name">brewing</span>.<span class="name">coffeeName</span> <span class="operator">=</span> <span class="name">choosingCoffee</span>.<span class="name">sideBar</span>.<span class="name">currentCoffee</span>
          <span class="name">brewing</span>.<span class="name">start</span>()
      }

</pre>
<p>The brewing process is defined as follows in <code>Brewing.qml</code>:</p>
<pre class="qml">

  <span class="type">BrewingForm</span> {
      <span class="name">id</span>: <span class="name">root</span>
      <span class="keyword">function</span> <span class="name">start</span>() {
          <span class="name">animation</span>.<span class="name">start</span>()
      }

      signal <span class="type">finished</span>()

      <span class="type"><a href="../qtquick/qml-qtquick-sequentialanimation.html">SequentialAnimation</a></span> {
          <span class="name">id</span>: <span class="name">animation</span>
          <span class="type"><a href="../qtquick/qml-qtquick-pauseanimation.html">PauseAnimation</a></span> {
              <span class="name">duration</span>: <span class="number">1500</span>
          }
          <span class="type"><a href="../qtquick/qml-qtquick-propertyaction.html">PropertyAction</a></span> {
              <span class="name">target</span>: <span class="name">root</span>
              <span class="name">property</span>: <span class="string">&quot;state&quot;</span>
              <span class="name">value</span>: <span class="string">&quot;coffee&quot;</span>
          }
          <span class="type"><a href="../qtquick/qml-qtquick-pauseanimation.html">PauseAnimation</a></span> {
              <span class="name">duration</span>: <span class="number">1500</span>
          }
          <span class="type"><a href="../qtquick/qml-qtquick-propertyaction.html">PropertyAction</a></span> {
              <span class="name">target</span>: <span class="name">root</span>
              <span class="name">property</span>: <span class="string">&quot;state&quot;</span>
              <span class="name">value</span>: <span class="string">&quot;milk&quot;</span>
          }
          <span class="type"><a href="../qtquick/qml-qtquick-pauseanimation.html">PauseAnimation</a></span> {
              <span class="name">duration</span>: <span class="number">1500</span>
          }
          <span class="type"><a href="../qtquick/qml-qtquick-scriptaction.html">ScriptAction</a></span> {
              <span class="name">script</span>: <span class="name">root</span>.<span class="name">finished</span>()
          }
      }

      Behavior on <span class="name">cup</span>.coffeeAmount {
          <span class="type"><a href="../qtquick/qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> {

          }
      }

      Behavior on <span class="name">cup</span>.milkAmount {
          <span class="type"><a href="../qtquick/qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> {
          }
      }
  }

</pre>
<p>After completion, the application returns to the start screen.</p>
<p>Files:</p>
<ul>
<li><a href="qtdoc-demos-coffee-applicationflow-qml.html">demos/coffee/ApplicationFlow.qml</a></li>
<li><a href="qtdoc-demos-coffee-applicationflowform-ui-qml.html">demos/coffee/ApplicationFlowForm.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-brewing-qml.html">demos/coffee/Brewing.qml</a></li>
<li><a href="qtdoc-demos-coffee-brewingform-ui-qml.html">demos/coffee/BrewingForm.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-choosingcoffee-ui-qml.html">demos/coffee/ChoosingCoffee.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-coffeebutton-qml.html">demos/coffee/CoffeeButton.qml</a></li>
<li><a href="qtdoc-demos-coffee-cup-qml.html">demos/coffee/Cup.qml</a></li>
<li><a href="qtdoc-demos-coffee-cupform-ui-qml.html">demos/coffee/CupForm.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-emptycup-qml.html">demos/coffee/EmptyCup.qml</a></li>
<li><a href="qtdoc-demos-coffee-emptycupform-ui-qml.html">demos/coffee/EmptyCupForm.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-navigationbutton-ui-qml.html">demos/coffee/NavigationButton.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-sidebar-qml.html">demos/coffee/SideBar.qml</a></li>
<li><a href="qtdoc-demos-coffee-sidebarform-ui-qml.html">demos/coffee/SideBarForm.ui.qml</a></li>
<li><a href="qtdoc-demos-coffee-coffee-pro.html">demos/coffee/coffee.pro</a></li>
<li><a href="qtdoc-demos-coffee-imports-coffee-constants-qml.html">demos/coffee/imports/Coffee/Constants.qml</a></li>
<li><a href="qtdoc-demos-coffee-imports-coffee-qmldir.html">demos/coffee/imports/Coffee/qmldir</a></li>
<li><a href="qtdoc-demos-coffee-main-cpp.html">demos/coffee/main.cpp</a></li>
<li><a href="qtdoc-demos-coffee-main-qml.html">demos/coffee/main.qml</a></li>
<li><a href="qtdoc-demos-coffee-qml-qrc.html">demos/coffee/qml.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/coffee_cup_large.png">demos/coffee/images/cup structure/coffee_cup_large.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/coffee_cup_outline.png">demos/coffee/images/cup structure/coffee_cup_outline.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/cup elements/coffee_cup_back.png">demos/coffee/images/cup structure/cup elements/coffee_cup_back.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/cup elements/coffee_cup_coverplate.png">demos/coffee/images/cup structure/cup elements/coffee_cup_coverplate.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/cup elements/coffee_cup_front.png">demos/coffee/images/cup structure/cup elements/coffee_cup_front.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/liquids/liquid_coffee.png">demos/coffee/images/cup structure/liquids/liquid_coffee.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/liquids/liquid_foam.png">demos/coffee/images/cup structure/liquids/liquid_foam.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/cup structure/liquids/liquid_milk.png">demos/coffee/images/cup structure/liquids/liquid_milk.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/coffees/Americano.png">demos/coffee/images/icons/coffees/Americano.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/coffees/Espresso.png">demos/coffee/images/icons/coffees/Espresso.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/coffees/Latte.png">demos/coffee/images/icons/coffees/Latte.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/coffees/Macchiato.png">demos/coffee/images/icons/coffees/Macchiato.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/coffees/cappucino.png">demos/coffee/images/icons/coffees/cappucino.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/contents/coffee.png">demos/coffee/images/icons/contents/coffee.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/contents/milk.png">demos/coffee/images/icons/contents/milk.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/icons/contents/sugar.png">demos/coffee/images/icons/contents/sugar.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/ui controls/buttons/back/white.png">demos/coffee/images/ui controls/buttons/back/white.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/ui controls/buttons/go/white.png">demos/coffee/images/ui controls/buttons/go/white.png</a></li>
<li><a href="images/used-in-examples/demos/coffee/images/ui controls/line.png">demos/coffee/images/ui controls/line.png</a></li>
</ul>
</div>
<!-- @@@demos/coffee -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2020 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
